<template>
	<!-- 充值页 -->
	<view class="recharge">
		<!-- 充值金额 -->
		<view class="amount">
			<view class="amount-title">充值金额</view>
			<view class="amount-list">
				<view class="amount-list__item" v-for="(amount,index) in amountList" :key="index"
					:class="{active: activeIndex===index}" @tap="activeIndex=index">
					<view class="amount-money">￥<text class="amount-money__num">{{amount.amount}}</text>元</view>
					<view class="amount-presenter">送{{amount.presenter}}元</view>
				</view>
			</view>
		</view>
		<!-- 充值按钮 -->
		<view class="recharge-button">
			<u-button :text="`到账${total}元,确认充值`" :hairline="false" color="#ff516b" :customStyle="{height: '88rpx'}"
				throttleTime="1000" @tap="handleRecharge"></u-button>
		</view>
		<!-- 支付键盘 -->
		<passkeyborad :show="showPasskeyborad" :money="total" @close="showPasskeyborad=false" @success="recharge">
		</passkeyborad>
	</view>
</template>

<script>
	// 引入支付键盘组件
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue';

	export default {
		components: {
			passkeyborad
		},
		data() {
			return {
				// 展示支付键盘
				showPasskeyborad: false,
				// 选中金额标记
				activeIndex: 0,
				// 金额列表
				amountList: [{
					amount: 10, // 金额
					presenter: 1 // 赠送金额
				}, {
					amount: 20, // 金额
					presenter: 2 // 赠送金额
				}, {
					amount: 30, // 金额
					presenter: 3 // 赠送金额
				}, {
					amount: 50, // 金额
					presenter: 5 // 赠送金额
				}, {
					amount: 100, // 金额
					presenter: 10 // 赠送金额
				}, {
					amount: 200, // 金额
					presenter: 20 // 赠送金额
				}]
			}
		},
		computed: {
			total() {
				// 到账金额
				return this.amountList[this.activeIndex].amount + this.amountList[this.activeIndex].presenter;
			}
		},
		methods: {
			// 充值
			async recharge() {
				await this.$api.pay.rechargeAPI(this.total);
				// 延迟返回上一页
				let timer = setTimeout(() => {
					this.$Router.back();
					clearTimeout(timer);
				}, 1500);
			},
			// 点击充值按钮
			handleRecharge() {
				// 弹出支付键盘
				this.showPasskeyborad = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		@include page-bgc();

		// 充值金额
		.amount {
			background-color: #fff;
			padding: 40rpx 20rpx;

			// 标题
			.amount-title {
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 40rpx;
				color: #333;
			}

			// 金额列表
			.amount-list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.amount-list__item {
					flex-shrink: 0;
					width: 30vw;
					text-align: center;
					box-shadow: 0 0 8px 1px lightgray;
					border-radius: 10px;
					border: 1px solid transparent;
					padding: 30rpx 0;
					box-sizing: border-box;
					margin-bottom: 30rpx;

					&.active {
						border-color: rgba($theme-color, 0.8);
						background-color: rgba($theme-color, 0.1);

						.amount-money {
							color: $theme-color;
						}
					}

					// 充值金额
					.amount-money {
						font-size: 28rpx;

						.amount-money__num {
							font-size: 48rpx;
						}
					}

					// 赠送金额
					.amount-presenter {
						font-size: 24rpx;
						color: #999;
						margin-top: 2px;
					}
				}
			}
		}

		// 充值按钮
		.recharge-button {
			padding: 0 20rpx;
			margin: 60rpx auto;
		}
	}
</style>